<template>
    <div id="oder-list" v-loading='isLoading'  class="app-container calendar-list-container">
        <div class="filter-container">
            <el-form :inline="true" ref="ruleForm">
                <el-form-item>
                    <el-button  type='button' class='el-button el-button--primary' @click="dialogFormVisible=true">{{$t('manager.Add_Manager')}}</el-button>   
                </el-form-item>   
            </el-form> 
        </div>
        <!-- 表格 -->
        <el-table
            :data="tableData"
            border
            v-loading='isLoading'
            style="width: 100%">
            <el-table-column prop="sortId" :label="$t('manager.Number')"> </el-table-column>
            <el-table-column prop="userName" :label="$t('manager.User_Name')"> </el-table-column>
            <el-table-column prop="userAcount" :label="$t('manager.User_Account')"></el-table-column>
            <el-table-column prop="managerType" :label="$t('manager.User_Type')">
                <template slot-scope="scope">
                    {{scope.row.managerType == 1?$t('manager.Super_Manager')+'': scope.row.managerType == 2 ? $t('manager.Other')+'' : $t('manager.Manager')+''}}
                </template>
            </el-table-column>
            <!-- <el-table-column prop="isFlag" :label="$t('manager.Is_Use')">
                <template slot-scope="scope">
                    {{scope.row.isFlag == 1?$t('manager.Yes'):$t('manager.No')}}
                </template>
            </el-table-column> -->
            <el-table-column  :label="$t('manager.Time')"> 
                <template slot-scope="scope">  
                            {{scope.row.ctime | parseTime}}
                    </template>
            </el-table-column>
            <el-table-column prop="operate" :label="$t('manager.Operating')"> 
                <template slot-scope="scope">   
                    <div class="fx">
                        <el-button  type='button' icon="el-icon-setting" class='el-button el-button--primary' @click="roleListByManagers(scope.row.managerId)">{{$t('manager.Permission')}}</el-button> 
                        <el-button  type='button' icon="el-icon-delete" class='el-button el-button--danger' @click="deleteBtn(scope.row.managerId)">{{$t('manager.Delete')}}</el-button> 
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- //新增 -->
        <el-dialog :title="$t('manager.Add_Manager')" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item prop="userAcount" :label="$t('manager.Account')" :label-width="formLabelWidth">
                    <el-input v-model="form.account" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="passWord" :label="$t('manager.Password')" :label-width="formLabelWidth">
                    <el-input type='number' v-model="form.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="userName" :label="$t('manager.User_NickName')" :label-width="formLabelWidth">
                    <el-input v-model="form.username" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">{{$t('manager.Cancel')}}</el-button>
                <el-button type="primary" @click="submitForm('form')">{{$t('manager.Submit')}}</el-button>
            </div>
        </el-dialog>
        <!-- 角色管理权限 -->
        <el-dialog :title="$t('manager.Binding_permission_group')" :visible.sync="dialogFormVisible1">
            <!-- 表格 -->
            <el-table
                :data="tableData1"
                border
                v-loading='isLoading'
                style="width: 100%">
                <el-table-column prop="checked" label="">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.checked"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID"> </el-table-column>
                <el-table-column prop="roleName" :label="$t('manager.Group_name')"> </el-table-column>
                <el-table-column prop="roleNote" :label="$t('manager.Description')"> </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">{{$t('manager.Cancel')}}</el-button>
                <el-button type="primary" @click="setAuthority()">{{$t('manager.Submit')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getManagetList, addManager, delManageById, roleListByManager, setRoleByManager } from '@/api/manager'
export default {
    data() {
        return {
            isLoading: false,
            currentPage: 1,
            pageSizes: [10, 20, 30 , 40],
            pageSize: 10,
            total:0,
            tableData: [],
            dialogFormVisible: false,
            dialogFormVisible1: false,
            formLabelWidth: '140px',
            tableData1: [],
            rules: {
                // account: [{ required: true, message: "$t('manager.Tip_1')", trigger: 'blur' },],
                account: [{ required: true, message: this.$t('manager.Tip_account_null'), trigger: 'blur' },],
                password: [{ required: true, message: this.$t('manager.Tip_password_null'), trigger: 'blur' },],
                username: [{ required: true, message: this.$t('manager.Tip_username_null'), trigger: 'blur' },]
            },
            form: {
               account: '',
               password: '',
               username: ''
            },
            managerId: ''
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pageSize = val;
            this.getManagetLists()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getManagetLists()
        },
        resetForm(form) {
            this.$refs['form'].resetFields();
        },
        //新增
        submitForm(form) {
            this.$refs['form'].validate(async(valid) => {
                if (valid) {
                    const  data  =  await addManager(this.form)
                    if(data.code == 1) {
                        this.$message({
                            type: 'success',
                            message: this.$t('manager.Tip_add_Succ')
                        })
                        this.getManagetLists()
                        this.dialogFormVisible = false
                    }else {
                        this.$message({
                            type: 'error',
                            message: data.msg
                        })
                    }
                }
            })
        },
        //管理员列表
        async getManagetLists() {
            const  data  = await getManagetList(this.filtersCondition)
            if(data.code == 1) {
                this.total = data.data.total;  
                this.tableData = data.data.records.map((item,index) => {
                    return {
                        sortId:index + 1,
                        ...item,
                        checked: false
                    }
                })
            }
        },
        //删除
        async deleteBtn(key) {
            this.$confirm(this.$t('manager.Is_Delete'), this.$t('manager.Tip'), {
                confirmButtonText: this.$t('manager.Submit'),
                cancelButtonText: this.$t('manager.Cancel'),
                type: 'warning'
            }).then(async () => {
                const data  = await delManageById({
                    key
                })
                if(data.code == 1) {
                    this.$message({
                        type: 'success',
                        message: this.$t('manager.Delete_Succ')
                    });
                    this.getManagetLists()
                }else {
                    this.$message({
                        type: 'success',
                        message: data.msg
                    });
                }
            })
            
        },
        //获取角色列表
        async roleListByManagers(key = '') {
            this.dialogFormVisible1 = true
            this.managerId = key
            const  data  = await roleListByManager({
                key
            })
            if(data.code == 1) {
                this.tableData1 = data.data.map(item => {
                    if(item.isFlag > 0) {
                        return {
                            ...item,
                            checked: true
                        }
                    }else {
                        return {
                            ...item,
                            checked: false
                        }
                    }
                })
            }
        },
        //设置角色
        async setAuthority() {
            var id = []
            this.setAuthorities.forEach(item => {
                id.push(item.id)
            })
            const  data  = await setRoleByManager({
                key: this.managerId,
                roleIds: id.join(',')
            })
            if(data.code == 1) {
                this.$message({
                    type: 'success',
                    message: this.$t('manager.Set_role_permissions_successfully')
                })               
                this.roleListByManagers(this.managerId)
                 this.dialogFormVisible1 = false
            }else {
                this.$message({
                    type: 'error',
                    message: data.msg
                })
            }
        }
    },
    computed : {
        //请求的过滤条件
        filtersCondition(){
            return {
                offset: this.currentPage,
                limit: this.pageSize,
            }
        },
        setAuthorities() {
            let checkedList = this.tableData1.filter(item => item.checked)
            return checkedList
        }
    },
    created() {
        this.getManagetLists()
    }
}
</script>

<style>

</style>
